<template>
    <div class="flex login-wrap a-center">
        <img
            class="logo"
            src="@/assets/image/goutou.webp"
            alt="logo"
        >
        <el-form
            ref="formRef"
            :rules="rules"
            :model="loginForm"
        >
            <el-form-item>
                <span
                    class="fw-100 text-center bold block"
                    style="font-size: 28px;"
                >欢迎回来</span>
            </el-form-item>
            <el-form-item prop="username">
                <el-input
                    clearable
                    size="large"
                    placeholder="请填写账号"
                    @keydown.enter="submitForm(formRef)"
                    v-model="loginForm.username"
                ></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input
                    type="password"
                    clearable
                    size="large"
                    placeholder="请填写密码"
                    @keydown.enter="submitForm(formRef)"
                    v-model="loginForm.password"
                ></el-input>
            </el-form-item>
            <el-form-item>
                <el-button
                    size="large"
                    type="primary"
                    @click="submitForm(formRef)"
                >登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import type { ElForm } from 'element-plus'
import { fetchLoginByPwd } from '@/service/api'
import { setToken, setUserInfo, loginRules } from '@/utils'

type FormInstance = InstanceType<typeof ElForm>
const formRef = ref<FormInstance>()
const rules = reactive(loginRules)
const loginForm = reactive({
    username: '15866901234',
    password: '12345q',
})

function submitForm(formEl: FormInstance | undefined) {
    if (!formEl) return
    formEl.validate(async (valid) => {
        if (!valid) return
        const { token, userInfo } = await fetchLoginByPwd(loginForm)
        setToken(token)
        setUserInfo(userInfo)
        location.reload()
    })
}
</script>
<style scoped>
.login-wrap {
    background: #f1f1f1;
    border-radius: 12px;
    overflow: hidden;
    width: 550px;
}
.logo {
    width: 200px;
    height: 100%;
    object-fit: cover;
}
.el-form {
    padding: 30px;
    width: 100%;
}
>>> .el-input--large .el-input__inner {
    border-radius: 50px;
}
.el-input,
.el-button {
    width: 100%;
    border-radius: 50px;
}
</style>
